<template>
    <!-- 表格 -->
    <el-table class="pageTableClass" :data="taskNoPage" height="calc(100vh - 380px)" :loading="isLoading">
        <el-table-column label="序号" align="center" width="70">
            <template #default="scope">
                {{ (paginationParams.current - 1) * paginationParams.pageSize + scope.$index + 1 }}
            </template>
        </el-table-column>
        <el-table-column prop="name" min-width="150" label="维修名称" align="center" />
        <el-table-column prop="code" min-width="150" label="维修编号" align="center" />
        <el-table-column prop="equipmentName" min-width="200" label="维修工装" align="center"/>
        <el-table-column prop="executeUserName" min-width="180" label="实施角色" align="center" />
        <el-table-column prop="malfunctionName" min-width="100" label="故障类型" align="center" />
        <el-table-column prop="description" min-width="180" label="故障内容" align="center" />
        <el-table-column label="操作" align="center" fixed="right" width="250">
            <template #default="scope">
                <el-button style="color:#4160beed" :icon="CircleCheck" text @click="handleEdit(scope.row, true)"
                    size="small" plain>完成</el-button>
                <el-button :icon="Edit" text @click="handleEdit(scope.row)" size="small" plain>修改</el-button>
                <el-button style="color:red" :icon="Delete" text @click="handleDel(scope.row)" size="small"
                    plain>删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="pagePagination">
        <el-pagination background v-model:current-page="paginationParams.current"
            v-model:page-size="paginationParams.pageSize" layout="total, sizes, prev, pager, next" :total="pageTotal"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>

</template>

<script setup>
import { defineProps, ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { CircleClose, CirclePlus, Delete, Edit, Download, CircleCheck, Plus, SwitchButton } from '@element-plus/icons-vue'

const dialogVisible = ref(false);
const form = ref({});
const formLabelWidth = ref('120px');
const contentDialog = ref([])
const props = defineProps({
    paginationParams: Object,
    onSubmit: Function,
    handleSizeChange: Function,
    handleCurrentChange: Function,
    taskNoPage: Array,
    pageTotal: Number,
    equipmentData: Object,
    fetchPage: Function,
    handleEdit: Function,
    handleDel: Function,
    faultTypeOptions: Array,
});



</script>

<style scoped>
.pageTableClass {
    width: 100%;
}

.pagePagination {
    margin-top: 20px;
    text-align: center;
}
</style>